<template>
  <div class="filter-wrapper">
    <!-- 学校名称 -->
    <div class="filter-item">
      <span class="filter-label">学校名称：</span>
      <!-- <AutoComplete
        v-model:value="formState.xxmc"
        placeholder="请输入学校名称"
        class="filter-input"
        :options="schoolNameOptions"
        @search="handleSchoolSearch"
        allowClear
      /> -->
      <Input v-model:value="formState.xxmc" placeholder="请输入学校名称" allowClear class="filter-input" />
    </div>
    <!-- 所在地市 -->
    <div class="filter-item">
      <span class="filter-label">所在地市：</span>
      <Select v-model:value="formState.dsCode" disabled placeholder="请选择地市" allowClear class="filter-input" @change="handleDsChange">
        <Select.Option v-for="city in cityCodeMap" :key="city.code" :value="city.code">
          {{ city.name }}
        </Select.Option>
      </Select>
    </div>

    <!-- 区县 -->
    <div class="filter-item">
      <span class="filter-label">区县：</span>
      <Select v-model:value="formState.qxCode" placeholder="请选择区县" allowClear class="filter-input" @change="handleQxChange">
        <Select.Option v-for="district in districtOptions" :key="district.code" :value="district.code">
          {{ district.name }}
        </Select.Option>
      </Select>
    </div>

    <!-- 学校类型 -->
    <div class="filter-item">
      <span class="filter-label">学校类型：</span>
      <Select v-model:value="formState.xxlx" placeholder="请选择学校类型" allowClear class="filter-input">
        <Select.Option v-for="type in schoolTypes" :key="type" :value="type">
          {{ type }}
        </Select.Option>
      </Select>
    </div>
    <!-- 操作按钮 -->
    <div class="filter-actions">
      <Button type="primary" @click="handleSearch" class="action-button">搜索</Button>
      <Button @click="handleReset">重置</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, watchEffect } from "vue"
import { Select, Button, AutoComplete, Input } from "ant-design-vue"

import { schoolTypes } from "../types/school"

const props = defineProps<{
  initialQuery: any
}>()

const emit = defineEmits(["search", "reset"])

// 表单数据
const formState = reactive<any>({
  xxmc: props.initialQuery?.xxmc || "",
  dsCode: props.initialQuery?.dsCode || "3301",
  qxCode: props.initialQuery?.qxCode || undefined,
  qx: undefined,
  xxlx: props.initialQuery?.xxlx || undefined,
})

import city from "@/area/city.json"
import county from "@/area/county.json"

// 区县选项
const districtOptions = ref<any[]>([])

// 学校名称过滤和建议
const schoolNameOptions = ref<any[]>([])
const schoolNames = [
  "杭州市第一中学",
  "杭州市第二中学",
  "杭州市第四中学",
  "杭州市西湖区实验小学",
  "杭州市拱墅区大关中学",
  "杭州第七中学",
  "浙江省杭州高级中学",
  "杭州学军中学",
  "杭州外国语学校",
  "浙江大学附属中学",
]

// 学校名称搜索
const handleSchoolSearch = (value: string) => {
  if (!value || value.trim() === "") {
    schoolNameOptions.value = []
    return
  }

  // 过滤匹配的学校名称
  const filtered = schoolNames.filter(name => name.toLowerCase().includes(value.toLowerCase()))

  schoolNameOptions.value = filtered.map(name => ({ value: name }))
}

const cityCodeMap = ref(city)

const handleQxChange = (value: string) => {
  formState.qx = county.find(e => e.code === value)?.name
}
const handleDsChange = (value: string) => {
  formState.ds = city.find(e => e.code === value)?.name
}

watch(
  () => formState.dsCode,
  newVal => {
    if (newVal) {
      formState.qxCode = undefined
      formState.qx = undefined
    }
  },
)
watchEffect(() => {
  if (formState.dsCode) {
    districtOptions.value = county.filter(e => e.c_code === formState.dsCode)
  } else {
    districtOptions.value = []
  }
})

// 搜索处理
const handleSearch = () => {
  emit("search", { ...formState })
}

// 重置处理
const handleReset = () => {
  formState.dsCode = '3301'
  formState.ds = '杭州市'
  formState.qxCode = undefined
  formState.qx = undefined
  formState.xxlx = undefined
  formState.xxmc = ""
  emit("reset", { ...formState })
}
</script>

<style scoped>
.filter-wrapper {
  display: flex;
  align-items: center;
  border-radius: 4px;
  width: 100%;
  flex-wrap: nowrap;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-right: 16px;
  white-space: nowrap;
  /* flex: 1; */
}

.filter-label {
  /* width: 80px; */
  text-align: right;
  margin-right: 8px;
  font-size: 16px;
}

.filter-input {
  width: 175px;
}

.filter-actions {
  display: flex;
  margin-left: auto;
  gap: 8px;
}

.action-button {
  margin-right: 8px;
}
</style>
